<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <!-- 页面载入后，调用init函数 -->
  <body onload="initMap()">
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=E27BZ-CLHYI-S5MGK-5OVAU-INSR5-4MBQC"></script>
    <script>
      //地图初始化函数，本例取名为init，开发者可根据实际情况定义
      function initMap() {
        //定义地图中心点坐标
        var center = new TMap.LatLng(31.329716, 121.508386)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById("container"), {
          center: center, //设置地图中心点坐标
          viewMode: "3D", //设置显示模式 2D 3D可以自己修改
          zoom: 17.2, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45, //设置地图旋转角度
        })
      }
    </script>
  </body>
</html>
